<!doctype html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ascii art</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
    }
    body {
      position: relative;
      overflow: hidden;
      user-select: none;
      pointer-events: none;
    }
    #outer {
      font-size: 0;
      font-weight: 600;
      position: absolute;
      width: 100%;
      overflow: hidden;
      left: 50%;
      top: 50%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transform-origin: 50% 50%;
      word-break: break-word;
    }
    #inner {
      display: inline-block;
    }
  </style>
</head>
<body>
<!--<span id="test" style="position: relative;z-index: 1000;"></span>-->
<p id="outer"><span id="inner"></span></p>
<script>
  let trigTimer
  let backgroundColor = '1 1 1' // 背景颜色
  let scale = 1 // 缩放
  let text = `色欲壹事,乃舉世人之通病不特中下之人,被色所迷.即上根之人,若不戰兢自持,乾惕在念,則亦難免不被所迷.試觀古今來多少出格豪傑,固足為聖為賢.
祗由打不破此關,反為下愚不肖.兼復永墮惡道者,蓋難勝數.楞嚴經雲,若諸世界六道眾生,其心不淫,則不隨其生死相續.汝修三昧,本出塵勞.淫心不除,塵不可出.
學道之人,本為出離生死.茍不痛除此病,則生死斷難出離,即念佛門,雖則帶業往生.然若淫習固結,則便與佛隔,難於感應道交矣.欲絕此禍,莫如見壹切女人,皆作親想,怨想,不淨想.親想者.
見老者作母想淘寶特賣眼線潤膚乳排行榜好左旋肉堿哪個牌子好去黑頭化妝水哪個牌子好有效的哪個保健補品好,長者作姊想,少者作妹想,幼者作女想,欲心縱盛,斷不敢於母姊妹女邊起不正念.
視壹切女人,總是吾之毋姊妹女.則理制於欲,欲無由發矣.怨想者,凡見美女,便起愛心.由此愛心,便墮惡道.長劫受苦,不能出離.如是則所謂美麗嬌媚者,比劫賊虎狼、毒蛇惡蠍,砒霜鴆毒,烈百千倍.
於此極大怨家,尚猶戀戀著念,豈非迷中倍人.不淨者,美貌動人,只外面壹層薄皮耳.若揭去此皮,則不忍見矣.骨肉膿血,屎尿毛髮,淋漓狼藉,了無壹物可令人愛.但以薄皮所蒙.則妄生愛戀.
華瓶盛糞,人不把玩.今此美人之薄皮,不異華瓶.皮內所容,比糞更穢.何得愛其外皮,而忘其裏之種種穢物,漫起妄想乎哉.茍不戰兢乾惕,痛除此習.則唯見其姿質美麗,致愛箭入骨,不能自拔.
平素如此,致其沒後不入女腹,不可得也.入人女腹猶可.入畜女腹,則將奈何.試壹思及,心神驚怖.
然欲於見境不染心,須於未見境時,常作上三種想,則見境自可不隨境轉.否則縱不見境,意地仍復纏綿,終被淫欲習氣所縛.固宜認真滌除惡業習氣,方可有自由分.` // 文本内容
  let fontSize = 12 // 字体大小
  let mode = 'contain' // contain
  let preset = 'mememe' // 预设
  let fontFamily = 'Microsoft Yahei' // 字体
  const defaultOpts = {
    backgroundColor,
    scale,
    preset,
    text,
    mode,
    fontSize,
    fontFamily,
  }
  let imgUrl = '' // 图片地址
  const $outer = document.getElementById('outer')

  const img = new Image()

  function onImgLoaded () {
    let pWidth = img.width
    let pHeight = img.height
    const imgRatio = pWidth / pHeight
    if (mode === 'contain') {
      pWidth = window.innerWidth
      pHeight = pWidth / imgRatio
      if (pHeight > window.innerHeight) {
        pHeight = window.innerHeight
        pWidth = pHeight * imgRatio
      }
    }
    else if (mode === 'cover') {
      pWidth = window.innerWidth
      pHeight = pWidth / imgRatio
      if (pHeight < window.innerHeight) {
        pHeight = window.innerHeight
        pWidth = pHeight * imgRatio
      }
    }
    else if (mode === 'fill') {
      pWidth = window.innerWidth
      pHeight = window.innerHeight
      $outer.style.cssText += `background-size:${pWidth}px ${pHeight}px;`
    }
    else if (mode === 'origin') {
      // 原始大小
    }
    $outer.style.cssText += `margin-left:${-pWidth / 2}px;margin-top:${-pHeight / 2}px;width:${pWidth}px;height:${pHeight}px;`
    $outer.innerHTML = `<span id="inner">${text}</span>`
    setTimeout(function () {
      let textWidth = document.getElementById('inner').offsetWidth
      let textHeight = document.getElementById('inner').offsetHeight
      // -1是为了避免小数点影响
      if (textWidth < pWidth - 1) {
        textWidth -= 1
        textHeight = fontSize
        $outer.innerHTML = `<span id="inner">${new Array(Math.ceil(pWidth / textWidth) * Math.ceil(pHeight / textHeight)).fill(text).join('')}</span>`
      }
      else {
        textHeight -= 1
        $outer.innerHTML = `${new Array(Math.ceil(pHeight / (textHeight - fontSize))).fill(text).join('')}`
      }
      $outer.style.cssText += `background-image:url(${imgUrl});`
    }, 0)
    requestAnimationFrame(function () {
    })
  }

  /**
   * properties
   * @param properties.schemecolor 背景颜色
   * @param properties.background_image 自定义背景图片
   * @param properties.scale 缩放
   * @param properties.mode 背景显示方式（contain、cover、fill、origin）
   * @param properties.preset 预设（mememe、rikka）
   * @param properties.text 文本内容
   * @param properties.font_size 字体大小
   * @param properties.font_family 字体
   */
  const onUpdate = function (properties) {
    try {
      // 初始化
      // document.getElementById('test').innerHTML += JSON.stringify(properties.background_image)
      properties.scale && (scale = properties.scale.value)
      properties.mode && (mode = properties.mode.value)
      properties.preset && (preset = properties.preset.value)
      properties.schemecolor && (backgroundColor = properties.schemecolor.value)
      properties.font_size && (fontSize = properties.font_size.value)
      properties.font_family && (fontFamily = properties.font_family.value)
      properties.text && (text = properties.text.value)
      text = text.replace(/\s/g, '') // 移除空白符

      switch (preset) {
        case '0':
          if (properties.background_image) {
            imgUrl = 'file:///' + properties.background_image.value
          }
          break
        case 'mememe':
          mode = 'contain'
          backgroundColor = defaultOpts.backgroundColor
          imgUrl = './mememe.gif'
          break
        case 'rikka':
          mode = 'cover'
          backgroundColor = '0.149 0.145 0.149'
          imgUrl = './rikka.gif'
          break
        case 'rikka2':
          mode = 'cover'
          backgroundColor = '0.043 0.047 0.047'
          imgUrl = './rikka2.gif'
          break
        case 'mato':
          mode = 'cover'
          backgroundColor = '0 0 0'
          imgUrl = './mato.gif'
          break
        default:
          console.error('none')
      }

      $outer.style.cssText = `
          font-size:${fontSize}px;
          line-height:${fontSize}px;
          font-family:${fontFamily};
          transform:scale(${scale});
        `
      document.body.style.cssText = `background-color:rgb(${backgroundColor.split(' ').map(c => Math.round(c * 255)).join(',')});`
      img.src = imgUrl
      img.complete ? onImgLoaded() : (img.onload = onImgLoaded)
    }
    catch (e) {
      // document.getElementById('test').innerHTML += 'error:' + e
    }
  }

  // TODO mock
  // onUpdate({
  //   scale: { value: defaultOpts.scale },
  //   mode: { value: 'contain' },
  //   font_size: { value: defaultOpts.fontSize },
  //   font_family: { value: defaultOpts.fontFamily },
  //   schemecolor: { value: defaultOpts.backgroundColor },
  //   text: { value: defaultOpts.text },
  //   preset: { value: '0' },
  //   background_image: { value: 'C:\\Users\\Tank\\Pictures\\hzw.gif' },
  // })

  window.wallpaperPropertyListener = {
    applyUserProperties: function (properties) {
      clearTimeout(trigTimer)
      trigTimer = setTimeout(() => onUpdate(properties), 500)
    }
  }
</script>
</body>
</html>